<template>
  <div class="homeIndex">
    <div class="homeHeader">
      <div class="tq">
        <p>今日天气:{{ weathorlist.text }}</p>
        <p>风力:{{ weathorlist.windDir }}</p>
        <p>风力等级:{{ weathorlist.windScale }}</p>
        <p>风速:{{ weathorlist.windSpeed }}公里/小时</p>
        <p>相对湿度:{{ weathorlist.humidity }}</p>
        <p>实况温度:{{ weathorlist.temp }} ℃</p>
      </div>

      <div class="sentences" @click="getOne">
        <h3>每日寄语</h3>
        <p class="content">{{ sentences.content }}</p>
        <p class="author">
          {{ sentences.author }}
        </p>
      </div>
    </div>


    <i class="el-icon-map-location dl" @click="getGeography"></i>
    <div class="mapfooter">
      <div class="map" id="Map" v-show="isShow"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      weathorlist: {},
      user: {},
      sentences: {},
      isShow: false,
    };
  },
  created() {
    this.user = JSON.parse(sessionStorage.getItem("user")); 
       //初始化轻音乐的播放
  this.$store.commit("setShowData",this.user.user_music_isplay)
  this.$store.commit("setNumberData",this.user.flutter_number)


    this.getOne();
  },
  mounted() {
    // console.log(this.$refs)
    //    this.$refs.audio.volume = 0.2;
    var map = new BMap.Map("Map");
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);

    var geolocation = new BMap.Geolocation();

    let that = this;
    geolocation.getCurrentPosition(async function (r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);

        const point = new BMap.Point(r.point.lng, r.point.lat);

        //获取天气
        let data = await that.$http.get(
          `https://devapi.heweather.net/v7/weather/now?location=${r.point.lng},${r.point.lat}&&key=ee28675b82cc42789ab3b7695787839a`
        );
        // console.log(data.data.now);
        if (data.data.code == 200) {
          that.weathorlist = data.data.now;
          //   console.log(this)
        }

        // 创建点坐标
        map.centerAndZoom(point, 20);
        // 初始化地图，设置中心点坐标和地图级别
      } else {
        alert("failed" + this.getStatus());
      }
    });
  },
  methods: {
    //获取当前的地理位置
    getGeography() {
      this.isShow = !this.isShow;
    },
    //获取每日一语
    async getOne() {
      let data = await this.$http.get("home/sentence");
      //  console.log(data.status)
      if (data.status == 200) {
        this.sentences = data.data.datalist;
        //  console.log(this.sentences)
      } else {
        this.$message.error(data.data.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.homeIndex {
  min-height: calc(100vh - 145px);
  padding-bottom: 200px;
  position: relative;
  .homeHeader {
    display: flex;
    .tq {
      width: 300px;
      padding: 10px;
      border: 1px solid #999;
      border-radius: 10px;
      p {
        line-height: 30px;
      }
    }

    .sentences {
      cursor: pointer;
      width: 100%;
      padding: 10px;
      padding-left: 20px;
      background-image: "http:127.0.0.1:8888/bck/bck1.jpg";
      background-size: cover;
      h3 {
        margin-bottom: 20px;
        text-align: center;
        color: #f5f5f5;
      }
      p {
        font-size: 16px;
        text-indent: 32px;
        line-height: 30px;
        color: #f5f5f5;
        &:nth-of-type(2) {
          margin-top: 20px;
          text-align: right;
          font-size: 14px;
          color: #f5f5f5;
        }
      }
    }
  }
}
.map {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100vw - 260px);
  height: 500px;
}

.dl {
  position: fixed;
  right: 30px;
  bottom: 30px;
  font-size: 30px;
  z-index: 9999;
  color: #789;
}
</style>